<!--
 * @Author: zhangyun
 * @Date: 2021-04-21 13:44:42
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-27 16:00:11
 * @Desc: 
-->
<template>
  <section class="news_item p-3">
    <header class="mb-3">
      <strong class="author text-gray-400 text-xs">{{ author }}</strong>
      <strong class="time text-gray-400 text-xs">.{{ createTime }}</strong>
    </header>
    <section class="mb-3">
      <h4 class="title text-xl font-extrabold mb-3">{{ title }}</h4>
      <div class="content flex justify-between">
        <div class="image w-56 h-28 bg-gray-200 rounded-md"></div>
        <article class="desc flex-1 ml-3 text-sm">
          <p>{{ parseDescText(description) }}</p>
          <strong class="text-blue-600 cursor-pointer hover:text-blue-800" @click="readAll">
            阅读全文
            <i class="iconfont icon-shangxiazuoyouTriangle12"></i>
          </strong>
        </article>
      </div>
    </section>
    <footer class="flex items-center">
      <div
        class="support w-16 py-0.5 bg-blue-100 rounded text-center text-blue-600 font-semibold text-ms cursor-pointer hover:bg-blue-200 mr-1"
      >
        <i class="iconfont icon-shangsanjiaoxing px-0.5"></i>
        赞同
      </div>
      <div
        class="cai w-10 py-0.5 bg-blue-100 rounded text-center text-blue-600 font-semibold text-ms cursor-pointer hover:bg-blue-200"
      >
        <i class="iconfont icon-xiasanjiaoxing px-0.5"></i>
      </div>
      <div class="comment text-gray-400 text-sm ml-4 cursor-pointer hover:text-gray-600">
        <i class="iconfont icon-pinglun"></i>
        <span class="ml-1">{{ commentsNum }}条评论</span>
      </div>
      <div class="share text-gray-400 text-sm ml-4 cursor-pointer hover:text-gray-600" v-show="isShare">
        <i class="iconfont icon-fenxiang"></i>
        <span class="ml-1">分享</span>
      </div>
      <div class="collection text-gray-400 text-sm ml-4 cursor-pointer hover:text-gray-600" v-show="isCollection">
        <i class="iconfont icon-collection-b"></i>
        <span class="ml-1">收藏</span>
      </div>
      <div class="like text-gray-400 text-sm ml-4 cursor-pointer hover:text-gray-600" v-show="isLike">
        <i class="iconfont icon-shoucang"></i>
        <span class="ml-1">喜欢</span>
      </div>
      <div class="report text-gray-400 text-sm ml-4 cursor-pointer hover:text-gray-600" v-show="isReport">
        <i class="iconfont icon-icon_tip_off"></i>
        <span class="ml-1">举报</span>
      </div>
    </footer>
  </section>
</template>

<script>
import { defineComponent, getCurrentInstance } from 'vue'
import { filterHtml } from '@utils/filterHtml.ts'

export default defineComponent({
  name: 'NewsItem',
  props: {
    author: {
      type: String,
      require: false,
    },
    title: {
      type: String,
      require: true,
    },
    createTime: {
      type: String,
      require: false,
    },
    description: {
      type: String,
      require: true,
    },
    image: String,
    supportNum: {
      type: Number,
      default: 0,
    },
    commentsNum: {
      type: Number,
      default: 0,
    },
    isShare: {
      type: Boolean,
      default: true,
    },
    isLike: {
      type: Boolean,
      default: true,
    },
    isCollection: {
      type: Boolean,
      default: true,
    },
    isReport: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
    },
  },
  setup(props) {
    const { ctx } = getCurrentInstance()
    function parseDescText(text) {
      const newText = filterHtml(text)
      const str = newText.substring(0, 150)
      return newText.length > 150 ? str + '...' : str
    }
    async function readAll() {
      const res = await ctx.$http.get('/api/article', { params: { id: props.id } })
      console.log('res', res)
    }
    return {
      parseDescText,
      readAll,
    }
  },
})
</script>

<style></style>
